<template>
	<div v-if="show_dialog" 
			 :class="{ 'my-diagin-container-open': !loading, 'my-diagin-container-close': loading }">
		<div class="my-diagin-top-container">
			<div class="top-title">{{show_title}}</div>
			<div class="top-button">
				<el-button size="mini" type="danger" @click="closeMyDialog">关闭</el-button>
			</div>
		</div>
		<div class="my-diagin-center-container">
			<div class="innner-container">
				<slot name="container"></slot>
			</div>
		</div>
		<div class="my-diagin-botton-container">
			<slot name="bottom"></slot>
		</div>
	</div>
</template>

<script>
	import { EventBus } from "bus/mybus.js";
	export default{
		name:'DialogBig',
		props:{
			show_title:{
				type:String,
				default:'默认标题'
			},
			show_dialog:{
				type:Boolean,
				default:false
			}
		},
		data(){
			return {
				loading:this.$store.state.isCollapse
			}
		},
		mounted(){
			EventBus.$on('changeMyDialog' ,(e)=>{
        this.loading = !this.loading
      })
		},
		methods:{
			closeMyDialog(){
				this.$emit('closePage')
			},
		},
	}
</script> 

<style scoped>
	.my-diagin-container-open{
		width:calc(100% - 199px);height:calc(100vh - 92px);position:fixed;top:90px;right:0px;z-index:999;background-color:#F5F5F5;
	}
	.my-diagin-container-close{
		width:calc(100% - 64px);height:calc(100vh - 92px);position:fixed;top:90px;right:0px;z-index:999;background-color:#F5F5F5;
	}
	.my-diagin-top-container{
		width:100%;height:40px;background-color:#DCDCDC;display:flex;flex-direction:row;line-height:40px;
	}
	.my-diagin-center-container{
		width:100%;height:calc(100vh - 175px);overflow:auto;
	}
	.my-diagin-botton-container{
		position:absolute;left:0px;bottom:0px;width:100%;height:40px;display:flex;align-items:center;justify-content:center;
	}
	.innner-container{
		width:98%;margin-top:10px;margin-left:1%;
	}
	.top-title{
		width:90%;padding-left:15px;font-weight:650;
	}
	.top-button{
		width:10%;display:flex;justify-content:flex-end;align-items:center;padding-right:20px;
	}
  ::-webkit-scrollbar {
    width: 0 !important;
  }
  ::-webkit-scrollbar {
    width: 0 !important;height: 0;
  }
</style>